<template>
  <div class="page-mobile-wallet">
    <div :class="['header-top', scroll > 0 ? 'active' : '']">
      <div class="header_left" @click="$router.back()">
        <van-icon name="arrow-left" style="margin-left:.2rem;" />
      </div>
      <div class="center_title">我的账户</div>
      <div class="header_right">
        <!-- <img v-if="isShowSearch" src="/img/mobile/index_nav_search.png" alt="" @click="onClickRight"> -->
      </div>
    </div>
    <div class="fixed-box"></div>
    <div class="user-info">
      <div class="info-logo">
        <img v-if="user_info.avatar" :src="user_info.avatar" />
        <img v-else src="/img/mobile/default-avatar.png" alt="" />
      </div>
      <div class="user-name">
        {{ user_info.acName || $t("locale.mobile.user.unknow") }}
      </div>
      <div class="account">
        <div class="user-account">账户：{{ user_info.account }}</div>
      </div>
      <div class="user-menu">
        <div class="menu-item" @click="$router.push('/m/wallet')" v-if="!is_hidden_content && !is_show_price">
          <img src="/img/mobile/account_menus_recharge.png" alt="" />
          <span>账号充值</span>
        </div>
        <div class="menu-item" @click="$router.push('/m/study-card')">
          <img src="/img/mobile/account_menus_recharge.png" alt="" /><span
            >卡号激活</span
          >
        </div>
        <div class="menu-item" @click="$router.push('/m/capital-detail')">
          <img src="/img/mobile/account_menus_recharge.png" alt="" /><span
            >资金明细</span
          >
        </div>
      </div>
    </div>
    <div class="user-list" v-if="!is_hidden_content && !is_show_price">
      <div class="list-title">账户资金</div>
      <div class="list-item" @click="$router.push('/m/wallet')">
        <div class="item-left">
          <img src="/img/mobile/account_menus_balance.png" alt="" />
        </div>
        <div class="item-right">
          <div class="left-name">账户余额</div>
          <div class="right-info">
            <span>{{ formatter(user_info.balance) }}元</span>
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <!-- <div class="list-item">
        <div class="item-left">
          <img src="/img/mobile/account_menus_integral.png" alt="">
        </div>
        <div class="item-right">
          <div class="left-name">我的积分</div>
          <div class="right-info">
            <span>88.88个</span>
            <img src="/img/mobile/right-icon.png" alt="">
          </div>
        </div>
      </div>
      <div class="list-item">
        <div class="item-left">
          <img src="/img/mobile/account_menus_card.png" alt="">
        </div>
        <div class="item-right">
          <div class="left-name">我的卡券</div>
          <div class="right-info">
            <span>88张</span>
            <img src="/img/mobile/right-icon.png" alt="">
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import {
  buildOrder,
  buildH5Order,
  buildAliOrder,
  checkOrderNum,
  cardActivate,
  buildAliAppOrder,
  buildWeChatAppOrder
} from "~/api/account/wallet";
import { getWaterList } from "~/api/order";
import { wexinPay, wxJspay } from "~/utils/pay";
import { socketUrl } from "~/config/conf";
import { mapState, mapActions, mapMutations } from "vuex";
// import VueAnimateNumber from "vue-animate-number";
// if (process.client) {
//   // console.log(window);
//   const VueAnimateNumber = require("vue-animate-number").install(this);
//   console.log("VueAnimateNumber:", VueAnimateNumber);
// }
export default {
  // components: process.client
  //   ? {
  //       AnimateNumber: VueAnimateNumber
  //     }
  //   : {},
  props: ["setDisabled", "refreshFun", "setLoading"],
  data() {
    return {
      scroll: 0
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      is_ios(state) {
        return state.is_ios;
      },
      is_in_wechat(state) {
        return state.is_in_wechat;
      },
      is_in_minigram(state) {
        return state.is_in_minigram;
      },
      is_wechat_ios_limit(state) {
        return state.is_wechat_ios_limit;
      },
      is_hidden_content(state){
        return state.is_hidden_content;
      }
    }),
    is_show_price() {
      if (this.is_wechat_ios_limit) {
        return this.is_ios && this.is_in_wechat;
      } else {
        return false;
      }
    },
    is_allow() {
      if (!this.recharge_num) {
        return false;
      } else {
        return true;
      }
    },
    active_query() {
      return this.$route.query.active;
    },
    num() {
      return this.$route.query.num;
    },
    redirect_url() {
      return this.$route.query.rdurl;
    },
    //支付宝支付后返回的订单信息
    orderInfo() {
      return this.$route.query;
    }
  },
  watch: {},
  destroyed() {
    this.setDisabled(true);
  },
  deactivated() {
    this.setDisabled(true);
  },
  activated() {
    if (process.client) {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        this.$router.replace("/m/login");
      }
    }
    this.setDisabled(false);
    this.refreshFun(() => {
      this.initUser();
      this.setLoading(false);
    });
  },
  methods: {
    ...mapActions(["initBuyCourseRecord", "initUser"]),
    ...mapMutations([
      "SET_IS_LOADING",
      "UPDATE_USERINFO",
      "UPDATE_BUYRECORD_LIST"
    ]),
    formatter(num) {
      return num && num.toFixed(2);
    }
  },
  created() {
    if (process.client) {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        return this.$router.replace("/m/login");
      }
    }
    this.setDisabled(false);
    this.refreshFun(() => {
      this.initUser();
      this.setLoading(false);
    });
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-mobile-wallet {
  width: 100vw;
  min-height: 100vh;
  background: #ffffff;
  .header-top {
    width: 7.2rem;
    height: 0.9rem;
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
    line-height: 0.9rem;
    display: flex;
    align-items: center;
    box-shadow: none;
    background: var(--theme-color);
    .header_left {
      width: 15%;
      color: #ffffff;
      font-size: 0.35rem;
      display: flex;
      align-items: center;
    }
    .center_title {
      width: 70%;
      text-align: center;
      font-size: 0.3456rem;
      color: #ffffff;
      font-weight: bold;
    }
    .header_right {
      width: 15%;
      img {
        margin: 0 auto;
        display: block;
        width: 0.6111rem;
        height: 0.6111rem;
      }
    }
  }
  .header-top.active {
    background: var(--theme-color);
  }
  .fixed-box {
    width: 100%;
    height: 0.9rem;
  }
  .user-info {
    width: 100%;
    height: 5.76rem;
    padding-top: 0.6rem;
    background: var(--theme-color);
    .info-logo {
      width: 1.632rem;
      height: 1.632rem;
      margin: 0 auto;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        display: block;
        background-color: #ffffff;
      }
    }
    .user-name {
      color: #ffffff;
      font-size: 0.3rem;
      font-weight: bold;
      text-align: center;
      margin-top: 0.2rem;
    }
    .account {
      text-align: center;
      .user-account {
        color: #fefefe;
        // width: 3.8rem;
        height: 0.4224rem;
        text-align: center;
        display: inline-block;
        margin: 0.2rem auto;
        font-size: 0.2496rem;
        // padding: .1rem .3rem;
        padding: 0 0.3rem;
        line-height: 0.4224rem;
        background-color: rgba(255, 255, 255, 0.14);
        border-radius: 0.3rem;
      }
    }
    .user-menu {
      width: 100%;
      height: 0.6rem;
      display: flex;
      font-size: 0.3rem;
      color: #ffffff;
      justify-content: space-between;
      margin-top: 0.5rem;
      .menu-item {
        width: 33.333%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          display: block;
          width: 0.288rem;
          height: 0.288rem;
          margin-right: 0.1rem;
        }
      }
    }
  }
  .user-list {
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
    width: 100%;
    padding: 0.2688rem 0 0 0.2688rem;
    margin-top: -0.2rem;
    background: #fff;
    .list-title {
      color: #313233;
      font-weight: bold;
      font-size: 0.3072rem;
    }
    .list-item {
      width: 100%;
      height: 1rem;
      font-size: 0.3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item-left {
        width: 10%;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 0.4rem;
          height: 0.4rem;
          display: block;
        }
      }
      .item-right {
        width: 90%;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 0.01rem solid #e8e9eb;
        .left-name {
          color: #313233;
        }
        .right-info {
          display: flex;
          align-items: center;
          color: #949699;
          img {
            width: 0.2304rem;
            height: 0.2304rem;
            display: block;
            margin: 0 0.14rem;
          }
        }
      }
    }
    // .list-item:last-child{
    //   .item-right{
    //     border-bottom: none;
    //   }
    // }
  }
}
</style>
<style lang="scss">
.page-mobile-teacher {
}
</style>
